<template>
  <div class="level">
    <h1>医院</h1>
    <div class="content">
      <div class="left">
        等级：
      </div>
      <ul class="hospital-type">
        <li :class="{active:activeFlag===''}" @click="changeActiveFlag('')">全部</li>
        <li v-for="item in hospitalLevel" :class="{active:item.value===activeFlag}" :key="item.id" @click="changeActiveFlag(item.value)">
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {reqHospitalLevelOrRegion} from "@/api/home";
import {HospitalLevelOrRegion} from "@/api/home/type.ts";
const $emit = defineEmits(['getLevel'])
const hospitalLevel = ref<HospitalLevelOrRegion[]>([])
//
const activeFlag = ref<string>('')

onMounted(()=>{
  getHospitalLevelOrRegion()
})
const getHospitalLevelOrRegion = async () => {
  const result = await reqHospitalLevelOrRegion('hostype');
  console.log(result)
  hospitalLevel.value = result.data
}
const changeActiveFlag = (level:string) => {
  activeFlag.value = level
  $emit('getLevel',level)
}
</script>

<style scoped lang="scss">
.level{
  color:#7f7f7f;
  h1{
    font-weight: 900;
    margin: 10px 0;
  }
  .content{
    display: flex;
    .left{
      margin-right: 10px;
    }
    .hospital-type{
      display: flex;
      li{
        margin-right: 10px;
        &.active{
          color: #55a6fe
        }
      }
      li:hover{
        color:#55a6fe;
        cursor: pointer;
      }
    }
  }

}
</style>
